
<template>
  <!--http://10.90.86.248:8090/duanhuowang/duanhuowang/back.png-->
  <div class="sousuo">
    <div class="header">
      <div class="headerTop">
        <router-link to="/home"><img v-if="isShow==1" src="../../assets/1first/5-8搜索结果/back.png" alt="" class="back"></router-link>
        <router-link to="/sousuo"><img @click="doclean" v-if="isShow==0" src="../../assets/1first/5-8搜索结果/back.png" alt="" class="back"></router-link>
        <router-link to="/sousuo" class="sousuoLink"><input v-model="iptText" type="text" placeholder="输入商品关键词"></router-link>
        <img v-if="isHave==1" @click="doclean" src="../../assets/1first/5-8搜索结果/chahao.png" alt="" class="chahao">
        <span @click="dofind(iptText)" class="fr btn">搜索</span>
      </div>
    </div>
    <!--热搜-->
    <div v-if="isShow==1" class="hotsou">
      <span>亲们都在找</span>
      <div class="allfind">
        <span>面膜</span>
        <span>防晒</span>
        <span>眼霜</span>
        <span>精华</span>
        <span>洗面奶</span>
        <span>资生堂</span>
        <span>洗发水</span>
        <span>防晒喷雾</span>
      </div>
    </div>
    <!--搜索详情-->
    <div v-if="isShow==0" class="resultList">
      <div class="screen">
        <a :class="{active:item.isActive}" @click="dochange(index)" v-for="(item,index) in sousuo"  href="###">{{item.name}}</a>
        <!--<a  href="###">价格</a>-->
        <!--<a  href="###">销量</a>-->
        <!--<a  href="###">筛选</a>-->
      </div>
      <!--搜索出来的商品列表-->
      <div v-if="isShow==0" class="content">
        <div class="details" v-for="item in 2">
          <div class="left">
            <a href=""><img src="http://10.90.86.248:8090/class/chuncai.jpg" alt=""></a>
          </div>
          <div class="right">
            <a href="##"><p class="title">焕彩萃璨花蕊唇彩4.8g</p></a>
            <a href="##"> <span class="describe">焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g</span></a>
            <div class="foote">
              <img src="http://10.90.86.248:8090/class/japan.jpg" alt="">
              <img src="http://10.90.86.248:8090/class/feiji.jpg" alt="">
              <span>海外直邮</span>
              <span>￥166.06</span>
            </div>
          </div>
        </div>
        <div class="bottom">
          <img src="http://10.90.86.248:8090/class/datu.jpg" alt="">
          <a href="###"><span>加载更多</span></a>
        </div>
      </div>
    </div>
    <!--最近搜索-->
    <div v-if="isShow==1" class="history">
      <span>最近搜索</span>
      <div class="historyList">
        <span v-for="(item,index) in history">
          {{item}}
          <!--<img src="http://10.90.86.248:8090/home/sousuojieguo/chahao.png" alt="">-->
        </span>
        <div v-show="history.length" class="clean" @click="cleanHistory">清空搜索历史</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        isShow:1,
        isHave:0,
        isBack:true,
        iptText:'',
        sousuo:[
          {
            name:'默认',
            isActive:true,
          },
          {
            name:'价格',
            isActive:false,
          },{
            name:'销量',
            isActive:false,
          },
          {
            name:'筛选',
            isActive:false,
          }
        ],
        history:[]
      }
    },
    watch:{
      iptText:function (v1,v2) {
//        console.log(v1,v2);
        if (v1 == ''){
          this.isShow = 1;
          this.isHave = 0;
        }else {
          this.isHave = 1;
        }
      },
      history:function () {
        if (history.length){

        }
      }
    },
    mounted(){
      if(this.iptText === ''){
        this.isShow = 1
      }
    },
    methods:{
      dofind(e){
        if (this.iptText == ''){
          alert('请输入内容');
          return;
        }
        this.isShow = 0;
        this.history.push(e);
//        console.log(e,this.history);
      },
      doclean(){
        this.isShow = 1;
        this.iptText = '';
      },
      cleanHistory(){
        this.history.splice(0,history.length);
      },
      dochange(e){
        console.log(e);
        for(let i=0; i < this.sousuo.length; i++){
          this.sousuo[i].isActive = false;
        }
        this.sousuo[e].isActive = true;
      }
    }
  }
</script>
<style scoped>
  .headerTop{
    background: #e53e42;
    padding: 0.53rem;
    position: relative;
  }
  .back{
    width: 0.51rem;
    margin-right: 0.6rem;
  }
  .sousuoLink {
    display: inline-block;
    width: 11.7rem;
    border-radius: 0.18rem;
    background: #fff;
    line-height: 1.1rem;
    padding: 0 1.05rem 0 1.05rem;
    box-sizing: border-box;
    background-image: url("../../assets/1first/5-8搜索结果/sousuo.png");
    background-repeat: no-repeat;
    background-position: 0.33rem center;
    background-size: 0.62rem 0.67rem;
  }
  .sousuoLink>input{
    width: 100%;
    font-size: 0.53rem;
    line-height: 0.8rem;
  }
  .sousuoLink>input::-webkit-input-placeholder {
     color: #e83d41;
   }
  .chahao{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    right: 2.8rem;
    width: 0.67rem;
  }
  .btn{
    color: #fff;
    font-size: 0.67rem;
    line-height: 1.1rem;
  }
  .sousuo .hotsou span{
    display: block;
    margin-left: 0.651rem;
    line-height: 2.604rem;
    color: #808080;
    font-size: 0.62rem;
  }
  .sousuo .hotsou .allfind{
    background: white;
    height: 8.89rem;
  }
  .sousuo .hotsou .allfind span{
    margin-top: 0.44rem;
    text-align: center;
    color: #4d4d4d;
    display: inline-block;
    padding: 0 0.68rem;
    border: 1px solid #ccc;
    border-radius: 0.44rem;
    line-height: 0.89rem;
  }
  /*搜索结果*/
  .resultList .screen{
    width: 100%;
    line-height: 1.78rem;
    background: #fff;
    display: flex;
    text-align: center;
  }
  .resultList .screen a{
    flex: 1;
    line-height: 1.78rem;
    text-decoration: none;
    font-family: MicrosoftYaHei;
    font-size: 0.62rem;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0rem;
    color: #4d4d4d;
  }
  /*搜索出来的商品列表*/
  .content{
    background-color:#f2f2f2;
  }
  .content .details{
    background-color: #fff;
    padding: 0.53rem 0.44rem 0.53rem 0;
    overflow: hidden;
    margin-bottom: 1rem;
    border-bottom: 1px solid #ccc;
    display: flex;
  }
  .left{
    width: 1.53rem;
    padding: 0 1.67rem;
    flex: none;
  }
  .details .left>a>img{
    width: 100%;
  }
  .right{
    flex: 1;
  }
  .right a{
    text-decoration: none;
  }
  .title{
    font-family: SimHei;
    font-size: 0.67rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1rem;
    letter-spacing: 0rem;
    color: #333333;
  }
  .describe{
    font-size: 0.53rem;
    line-height: 1rem;
    color: #4d4d4d;
  }
  .foote{
    width: 100%;
  }
  .foote img:nth-child(1){
    width: 0.67rem;
  }
  .foote img:nth-child(2){
    width: 0.76rem;
    margin: 0 0.5rem;
  }
  .foote span:nth-child(3){
    font-size: 0.53rem;
    line-height: 1rem;
  }
  .foote span:nth-child(4){
    height: 1rem;
    font-family: SimHei;
    font-size: 0.67rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1rem;
    letter-spacing: 0rem;
    color: #e53e42;
    float: right;
  }
  .bottom{
    width: 100%;
    text-align: center;
  }
  .bottom>img{
    width: 100%;
  }
  .bottom>a{
    width: 4rem;
    display: block;
    text-decoration: none;
    font-family: MicrosoftYaHei;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0rem;
    color: #808080;
    margin: 0.67rem auto 0.44rem;
    font-size: 0.53rem;
  }

  /*.resultList .screen a:nth-child(1){*/
  /*color: red;*/
  /*}*/
  .resultList .screen .active{
    color: red;
  }
  /*最近搜索*/
  .sousuo .history span{
    display: block;
    margin-left: 0.651rem;
    line-height: 1.33rem;
    color: #808080;
    font-size: 0.36rem;
  }
  .sousuo .history .historyList{
    background: white;
    height: 19.9rem;
  }
  .sousuo .history .historyList img{
    position: absolute;
    top:0;
    width: 0.979rem;
  }
  .sousuo .history .historyList .clean{
    /*width: 16.276rem;*/
    font-size: 0.781rem;
    color: #808080;
    margin: auto;
    text-align: center;
    border: 1px solid #ccc;
    height: 1.177rem;
    vertical-align: middle;
    border-radius: 0.5885rem;
  }
</style>
